<template>
	<div class="flex flex-col">
		<div class="text-sm">【云端报警风险】</div>
		<div ref="echartsContainerRef" class="flex-1"></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import useSetOption from '@/hooks/useSetOption';
	import { useVisualizationStore } from '@/stores/visualizationStore';

	const echartsContainerRef = ref(null);
	const visualizationStore = useVisualizationStore();

	useSetOption({
		// Echart容器
		refTarget: echartsContainerRef,
		// Echarts渲染配置项
		renderOptions: () => {
			const risks = visualizationStore.data.riskData.risks;

			return {
				radar: {
					startAngle: 0,
					shape: 'polygon',
					radius: '85%',
					indicator: risks.map((item) => ({
						name: item.name,
						max: 100,
					})),
					splitArea: { areaStyle: { opacity: 0 } },
					splitLine: { lineStyle: { color: '#8BC6EC' } },
					axisLine: { lineStyle: { color: '#8BC6EC' } },
					axisName: { color: '#8BC6EC' },
				},
				series: {
					type: 'radar',
					data: [risks.map((item) => item.value)],
					areaStyle: { color: '#9599E2' },
					itemStyle: { color: '#00DDFF' },
				},
			};
		},
	});
</script>

<style scoped></style>
